<template>
  <van-nav-bar
    title="积分商城"
  />
  <div class="index-container">
  
    <van-swipe class="swiper" loop >
      <van-swipe-item class="swiper-item" :key="item.id" v-for="item in banners">
        <van-image
          class="banner-img"
          :src="item.link">
              <template v-slot:error>加载失败</template>
        </van-image>
      </van-swipe-item>
    </van-swipe>
    <div class="padding-box">
      <div class="search-box">
        <input type="text" v-model="searchKeyword" />
        <van-button color="#31b573" class="search-btn" @click="search('7')">搜索
        </van-button>
      </div>
    </div>
    <div class="list-box" v-if="hots.length>0">
      <div class="title">热门兑换</div>
      <div class="goods-box">
        <GoodsCard v-for="item in hots" :key="item.id" class="goods-card-item" :img="item.listPicUrl" :name="item.name"
          :type="item.type" :points="item.retailPrice" :volume="item.volume" :data-id="item.id"
          :price="item.virtualPrice" :urlmsg="`/detail/?goodsID=${item.goodsId}&standard=${item.goodsSpecificationIds}`" />
      </div>
    </div>
    <div class="list-box" v-if="goodsList.length>0">
      <div class="title">新品推荐</div>
      <div class="goods-box">
        <GoodsCard v-for="item in goodsList" :key="item.id" class="goods-card-item" :img="item.listPicUrl"
          :name="item.goodsName" :price="item.virtualPrice" :type="item.type" :points="item.retailPrice"
          :volume="item.volume" :urlmsg="`/detail/?goodsID=${item.goodsId}&standard=${item.goodsSpecificationIds}`"
            />
      </div>
    </div>

    <div class="list-box product-type" v-if="categories.length>0">
      <div class="title">产品种类</div>
      <div class="goods-box">
        <div class="goods-item" v-for="item in categories" :key="item.id" bindtap="search" 
        :data-category="item.id">
          <div class="img-box">
            <van-image
              class="banner-img"
              lazy-load
              :src="item.bannerUrl">
                  <template v-slot:error>加载失败</template>
            </van-image>
          </div>
          <div class="type-name">{{item.name}}</div>
        </div>
      </div>
    </div>

    <div :class="showResult?'showResult search-result':'hideResult search-result'">
      <!-- <div class="navbar">
        <van-icon name="arrow-left" size="50px" bind:click="hideResult" />
        <input type="text" v-model="searchKeyword" />
        <van-button color="#31b573" custom-style="width:150px;height:70px;border-radius:0;" bind:click="search">搜索
        </van-button>
      </div> -->
      <div class="padding-box">
        <div class="goods-box" v-if="searchList.length>0">
          <GoodsCard v-for="item in goodsList" :key="item.id" class="goods-card-item" :img="item.listPicUrl"
            :name="item.goodsName" price="item.virtualPrice" :type="item.type" points="item.retailPrice"
            :volume="item.volume"
              />
              <!-- :url="/pages/detail/index?goodsID={{item.goodsId}}&standard={{item.goodsSpecificationIds}}" -->
        </div>
        <div v-else class="tip">暂无搜索结果</div>
      </div>
    </div>

    <van-tabbar v-model="active" active-color="#31b573" inactive-color="#c3c9bf" class="mytabbar" route>
      <van-tabbar-item icon="shop-o" replace to="/home">积分商城</van-tabbar-item>
      <van-tabbar-item icon="user-o" replace to="/mine">个人中心</van-tabbar-item>
    </van-tabbar>
</div>
</template>

<script>
import GoodsCard from '../components/GoodsCard.vue'
import {
  GetBanner,
  GetGoodsList,
  GetHotGoods,
  GetCategory
} from '@/api'
import {reactive,toRefs} from 'vue'
export default {
  name: 'home',
  components: {
    GoodsCard
  },
  setup(props) {
    //参数
    const code = 0
    let home = reactive({
      searchKeyword: '',
      left: '100%',
      showResult: false,
      banners: [],
      goodsList: [],
      hots: [],
      categories: [],
      searchList: [],
      active:0
    })
    //请求
    GetBanner().then(res => {
      if (res.code === 0) {
        // this.setData({
        //   banners: res.data.imgs
        // })
        console.log('get banner==>', res)
        home.banners = res.imgs
      }
    }),
    GetGoodsList({
      userId: code
    }).then(res => {
      console.log('get goods list==>', res)
      if (res.code === 0) {
        let arr = [...res.data]
        arr.forEach(item => {
          item.type = item.specificationValue.split('；')[0]
          item.volume = item.specificationValue.split('；')[1]
        })
        home.goodsList=arr
      }
    })
    GetHotGoods({
      userId: code
    }).then(res => {
      console.log('get hot goods ==>', res)
      if (res.code === 0) {
        let arr = res.data
        arr.forEach(item => {
          item.type = item.specificationValue.split('；')[0]
          item.volume = item.specificationValue.split('；')[1]
        })
        home.hots=arr
      }
    })

    GetCategory().then(res => {
      console.log('get category==>', res)
      if (res.code === 0) {
        home.categories=res.data
      }
    })
    function search(a){
      console.log('get category==>', a)
    }
    //挂载
    return{ ...toRefs(home),search}
  }
}
</script>

<style scoped>
.index-container{
  width:100%;
  min-height: 100%;
  padding-bottom: calc(90px + env(safe-area-inset-top));
  background-color: #eeeeee;
}
.index-container .swiper{
  height:350px;
}

.swiper .banner-img{
  display: block;
  height:100%;
  object-fit: contain;
}

.padding-box{
  padding:30px 40px;
  background-color: #ffffff;
}

.search-box{
  width:100%;
  display: flex;
  align-items: center;
}

.search-box input{
  flex:1;
  height:70px;
  padding:0 10px;
  box-sizing: border-box;
  border:1px solid #e6e6e6;
}
.search-btn{
  width:150px;
  height:70px;
  border-radius:0;
}
.list-box{
  margin-top: 20px;
  padding:20px;
  background-color: #ffffff;
}

.list-box .title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}

.list-box .title::before,
.list-box .title::after{
  content: '';
  display: block;
  height: 5px;
  width: 30px;
  background-color: #000000;
}

.list-box .title::before{
  margin-right: 10px;
}

.list-box .title::after{
  margin-left: 10px;
}

.goods-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width:100%;
}

.goods-box .goods-card-item{
  width:48%;
}

.goods-box .goods-card-item:nth-child(n+3){
  margin-top: 20px;
}

.product-type .goods-item{
  width:30%;
}

.product-type .img-box{
  width:100%;
  height: 400px;
  object-fit: cover;
}

.product-type .img-box image{
  display: block;
  width:100%;
  max-height: 100%;
  object-fit:contain;
}

.product-type .type-name{
  font-size: 27px;
  text-align: center;
}

.search-result{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  padding-bottom: 90px;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: left .2s linear;
  overflow: scroll;
  z-index: 10;
}

.search-result.hideResult{
  left:100%;
}

.search-result.showResult{
  left:0;
}

.search-result .navbar{
  display: flex;
  align-items: center;
  padding:0 20px 10px;
  border-bottom: 1px solid #e6e6e6;
}

.search-result .navbar input{
  flex:1;
  width:200px;
  height:70px;
  margin-left: 20px;
  padding:0 10px;
  box-sizing: border-box;
  border:1px solid #e6e6e6;
}

.search-result .padding-box{
  padding:20px;
}

.tip{
  text-align: center;
  color:rgb(92, 90, 90);
}

.mytabbar{
  height: 100px;
}

.mytabbar /deep/ .van-icon {
    font-size: 44px!important;
}


</style>